{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from "macros.html" import apple_app_store_button with context %}
{% from "macros-protocol.html" import split with context %}

{% extends "firefox/base/base-protocol.html" %}

{% set show_firefox_app_store_banner = switch('firefox-app-store-banner') %}
{% set show_send_to_device = LANG in settings.SEND_TO_DEVICE_LOCALES %}
{% set ios_url = app_store_url('firefox', 'firefox-browsers-mobile-ios') %}

{% block page_css %}
  {{ css_bundle('protocol-split') }}
  {{ css_bundle('firefox-browsers-mobile') }}

  {% if show_firefox_app_store_banner %}
    {{ css_bundle('firefox-app-store-banner') }}
  {% endif %}
{% endblock %}

{# Issue 13019: Avoid duplicate content for English pages. #}
{%- block page_title_full -%}
  {%- if LANG == 'en-US' -%}
    Get Firefox for iOS (iPhone and iPad) — Mozilla (US)
  {%- elif LANG == 'en-GB' -%}
    Download Firefox for iOS (iPhone and iPad) — Mozilla (UK)
  {%- else -%}
    {{ ftl('mobile-ios-firefox-browser-ios') }} - Mozilla
  {%- endif -%}
{%- endblock -%}

{% block page_desc %}{{ ftl('mobile-ios-see-your-open-tabs') }}{% endblock %}

{% block body_class %}{{ super() }} mobile-ios{% endblock %}

{% block page_banner %}
  {% if show_firefox_app_store_banner %}
    {% include 'includes/banners/mobile/firefox-app-store.html' %}
  {% endif %}
{% endblock %}

{% block site_header %}
  {% with hide_nav_download_button=True %}
    {% include 'includes/protocol/navigation/navigation.html' %}
  {% endwith %}
{% endblock %}

{% block sub_navigation %}
  {% include 'firefox/includes/sub-nav-firefox.html' %}
{% endblock %}

{% block content %}
<main>
  {% call split(
    block_class='mzp-l-split-center-on-sm-md c-page-header',
    media_class='mzp-l-split-h-center',
    media_include='firefox/browsers/mobile/includes/s2d-ios.html',
    media_after=True
  ) %}
    <div class="mzp-c-wordmark mzp-t-wordmark-md mzp-t-product-firefox">{{ ftl('mobile-ios-firefox-browser') }}</div>
    <h1 class="mzp-u-title-lg">
      {{ ftl('mobile-ios-get-to-your-go-to') }}
    </h1>
    <p class="c-tagline">{{ self.page_desc() }}</p>
    <p class="c-cta">
      {{ apple_app_store_button(href=ios_url) }}
    </p>
  {% endcall %}

  {% call split(
    image=resp_img('img/firefox/browsers/mobile/ios/make-firefox-your-default-browser.svg', optional_attributes={ 'class': 'mzp-c-split-media-asset' }),
    block_class='mzp-l-split-reversed mzp-l-split-center-on-sm-md mzp-t-content-xl mzp-t-split-nospace',
    theme_class='mzp-t-background-secondary'
  ) %}
    <h3>{{ ftl('mobile-ios-make-firefox-your') }}</h3>
    <p>{{ ftl('mobile-ios-now-iphone-and') }}</p>
  {% endcall %}

  {% call split(
    image=resp_img('img/firefox/browsers/mobile/ios/fast-private-secure.svg', optional_attributes={ 'class': 'mzp-c-split-media-asset' }),
    block_class='mzp-l-split-center-on-sm-md mzp-t-content-xl'
  ) %}
    <h3>{{ ftl('mobile-ios-fast-private-secure') }}</h3>
    <p>{{ ftl('mobile-ios-keep-whats-personal') }}</p>
  {% endcall %}

  {% call split(
    image=resp_img('img/firefox/browsers/mobile/ios/stay-private-online.svg', optional_attributes={ 'class': 'mzp-c-split-media-asset' }),
    block_class='mzp-l-split-reversed mzp-l-split-center-on-sm-md mzp-t-content-xl mzp-t-split-nospace',
    theme_class='mzp-t-background-secondary'
  ) %}
    <h3>{{ ftl('mobile-ios-stay-private-online') }}</h3>
    <p>{{ ftl('mobile-ios-firefox-gives-you') }}</p>
  {% endcall %}

  {% call split(
    image=resp_img('img/firefox/browsers/mobile/ios/your-browser-history-is-history.svg', optional_attributes={ 'class': 'mzp-c-split-media-asset' }),
    block_class='mzp-l-split-center-on-sm-md mzp-t-content-xl'
  ) %}
    <h3>{{ ftl('mobile-ios-your-browsing-history') }}</h3>
    <p>{{ ftl('mobile-ios-if-you-want') }}</p>
  {% endcall %}

  {% call split(
    image=resp_img('img/firefox/browsers/mobile/ios/get-more-firefox-in-your-life.svg', optional_attributes={ 'class': 'mzp-c-split-media-asset' }),
    block_class='mzp-l-split-reversed mzp-l-split-center-on-sm-md mzp-t-content-xl mzp-t-split-nospace',
    theme_class='mzp-t-background-secondary'
  ) %}
    <h3>{{ ftl('mobile-ios-get-more-firefox') }}</h3>
    <p>{{ ftl('mobile-ios-add-firefox-across-v2') }}</p>
  {% endcall %}

  {% call split(
    image=resp_img('img/firefox/browsers/mobile/ios/find-it-all-faster.svg', optional_attributes={ 'class': 'mzp-c-split-media-asset' }),
    block_class='mzp-l-split-center-on-sm-md mzp-t-content-xl'
  ) %}
    <h3>{{ ftl('mobile-ios-find-it-all') }}</h3>
    <p>{{ ftl('mobile-ios-get-search-suggestions') }}</p>
  {% endcall %}

  {% call split(
    image=resp_img('img/firefox/browsers/mobile/ios/keep-tabs-on-all-those-tabs.svg', optional_attributes={ 'class': 'mzp-c-split-media-asset' }),
    block_class='mzp-l-split-reversed mzp-l-split-center-on-sm-md mzp-t-content-xl mzp-t-split-nospace',
    theme_class='mzp-t-background-secondary'
  ) %}
    <h3>{{ ftl('mobile-ios-own-your-home') }}</h3>
    <p>{{ ftl('mobile-ios-get-to-the-parts') }}</p>
  {% endcall %}

  {% call split(
    image=resp_img('img/firefox/browsers/mobile/ios/discover-more-of-what-you-love.svg', optional_attributes={ 'class': 'mzp-c-split-media-asset' }),
    block_class='mzp-l-split-center-on-sm-md mzp-t-content-xl'
  ) %}
    <h3>{{ ftl('mobile-ios-discover-more-of') }}</h3>
    <p>{{ ftl('mobile-ios-open-a-new-v2', 'mobile-ios-open-a-new') }}</p>
  {% endcall %}

  {% call split(
    image=resp_img('img/firefox/browsers/mobile/about-hero-800.png',
      srcset={
        'img/firefox/browsers/mobile/about-hero-500.png': '500w',
        'img/firefox/browsers/mobile/about-hero-800.png': '800w',
        'img/firefox/browsers/mobile/about-hero-1100.png': '1100w'
      },
      sizes={
        '(min-width: 768px)': '760px',
        'default': '250px'
      },
      optional_attributes={
        'class': 'mzp-c-split-media-asset',
        'height': '664',
        'width': '760',
        'loading': 'lazy'
      }
    ),
    block_class='about-mozilla mzp-l-split-center-on-sm-md mzp-t-content-xl mzp-t-split-nospace',
    theme_class='mzp-t-dark',
    media_class='mzp-l-split-media-overflow mzp-l-split-h-center',
    media_after=True
  ) %}
    <h3>{{ ftl('mobile-ios-about-mozilla') }}</h3>
    <p>{{ ftl('mobile-ios-mozilla-exists-to-v2', 'mobile-ios-mozilla-exists-to') }}</p>
  {% endcall %}

</main>
{% endblock %}

{% block js %}
{% if variation == '2' %}
  {{ js_bundle('firefox-browsers-ios-sms') }}
{% else %}
  {{ js_bundle('firefox-browsers-mobile') }}
{% endif %}

  {% if show_firefox_app_store_banner %}
    {{ js_bundle('firefox-app-store-banner') }}
  {% endif %}
{% endblock %}
